import { lazy, Suspense } from 'react'
import { Navigate } from 'react-router-dom'

const Login = lazy(() => import('../component/Login'))
const Main = lazy(() => import('../component/Main'))
const NotFind = lazy(() => import('../component/404'))
const About = lazy(() => import('../component/Main/About'))
const Home = lazy(() => import('../component/Main/Home'))
const Movie = lazy(() => import('../component/Main/Home/movie'))
const Weather = lazy(() => import('../component/Main/About/Weather'))

// 优化
const cos = (Comp) => {
    return (
        <Suspense fallback={<div>Loading......</div>} >
            <Comp />
        </Suspense>
    )
}

export const routes = [
    {
        path: '/login',
        element: cos(Login)
    },
    {
        path: '/main',
        element: cos(Main),
        children: [
            {
                path: '/main/about',
                element: cos(About),
                children: [
                    {
                        path: '/main/about/weather',
                        element: <Suspense fallback={<div>Loading......</div>} >
                            <Weather />
                        </Suspense>,
                    }
                ]
            },
            {
                path: '/main/home',
                element: <Suspense fallback={<div>Loading......</div>} >
                    <Home />
                </Suspense>,
                children: [
                    {
                        path: '/main/home/movie',
                        element: <Suspense fallback={<div>Loading......</div>} >
                            <Movie />
                        </Suspense>,
                    }
                ]
            },
        ]
    },
    {
        path: '/',
        element: <Suspense fallback={<div>Loading......</div>} >
            <Navigate to='/login' />
        </Suspense>,
    },
    {
        path: '*',
        element: <Suspense fallback={<div>Loading......</div>} >
            <NotFind />
        </Suspense>,
    },
]
